.chat-item {
  background: #fff;
  align-items: center;
  padding: 0.12rem 0.12rem;
  border-bottom: 0.01rem solid #ddd;

  &.top-chat-item {
    background: #f4f4f4;
  }

  &:first-child {
    border-top: 0.01rem solid #ddd;
  }

  .avatar-wrap {
    margin-right: 0.1rem;
    position: relative;

    img {
      max-width: 0.48rem;
      max-height: 0.48rem;
      border-radius: 0.04rem;
    }

    .remind-badge-count, .remind-badge-dot {
      width: 0.18rem;
      height: 0.18rem;
      line-height: 0.18rem;
      font-size: 0.08rem;
      color: #fff;
      text-align: center;
      background: #e82525;
      border-radius: 50%;
      position: absolute;
      right: -0.02rem;
      top: -0.02rem;
    }

    .remind-badge-dot {
      width: 0.1rem;
      height: 0.1rem;
    }
  }

  .chat-info-wrap {
    flex-basis: 85%;
    margin-right: 0.1rem;

    .chat-name {
      font-size: 0.16rem;
      color: #333;
      font-weight: bold;
      margin-bottom: 0.04rem;
    }

    .chat-context {
      font-size: 0.13rem;
      color: #999;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      white-space: normal;
    }

  }

  .chat-time-wrap {
    font-size: 0.12rem;
    color: #ccc;

    .chat-time {
    }

    .chat-remind {
      min-height: 0.18rem;
    }
  }
}
